<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="起始管点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipPointSt">
              <a-input v-model="model.pipPointSt" placeholder="请输入开始管点编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="终止管点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipPointEd">
              <a-input v-model="model.pipPointEd" placeholder="请输入终点管点编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管道级别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipLevel">
              <a-select v-model="model.pipLevel" style="width: 294px" placeholder="请选择管道级别">
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option :value="1">1级</a-select-option>
                <a-select-option :value="2">2级</a-select-option>
                <a-select-option :value="3">3级</a-select-option>
                <a-select-option :value="4">4级</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="是否清淤" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isDredging">
              <a-select v-model="model.isDredging" style="width: 294px" placeholder="请选择是否清淤">
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option :value="2">是</a-select-option>
                <a-select-option :value="1">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管道类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipType">
              <j-dict-select-tag
                type="list"
                v-model="model.pipType"
                dictCode="ps_pip_type"
                placeholder="请选择管道类型"
              />
            </a-form-model-item>
          </a-col>
          <a-col v-if="model.pipType + '' === '2'" :span="12">
            <a-form-model-item label="污水管道类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sewageType">
              <j-dict-select-tag
                type="list"
                v-model="model.sewageType"
                dictCode="sewage_ps_pip_type"
                placeholder="请选择污水管道类型"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管道材质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipMaterial">
              <j-dict-select-tag
                type="list"
                v-model="model.pipMaterial"
                dictCode="ps_pip_material"
                placeholder="请选择管道材质"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="areaId">
              <j-select-depart placeholder="请选择区域" v-model="model.areaId" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管道缺陷" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipDefective">
              <j-dict-select-tag
                type="list"
                v-model="model.pipDefective"
                dictCode="ps_pip_defective"
                placeholder="请选择管道缺陷"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="起点埋深" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="burialDepthSt">
              <a-input-number v-model="model.burialDepthSt" placeholder="请输入起点埋深" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="终点埋深" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="burialDepthEd">
              <a-input-number v-model="model.burialDepthEd" placeholder="请输入终点埋深" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="管径" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pipDiameter">
              <j-dict-select-tag
                type="list"
                v-model="model.pipDiameter"
                dictCode="ps_pip_diameter"
                placeholder="请选择入管径"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="长度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hieght">
              <a-input-number v-model="model.hieght" placeholder="请输入长度" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="埋设方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="embeddingMethod">
              <j-dict-select-tag
                type="list"
                v-model="model.embeddingMethod"
                dictCode="ps_ms_type"
                placeholder="请选择埋设方式"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="ps_pip_status" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="污水处理厂" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="embeddingMethod">
              <a-select
                v-model="model.facilityId"
                show-search
                allowClear
                placeholder="污水处理厂编号"
                :default-active-first-option="false"
                :show-arrow="false"
                :not-found-content="null"
                option-filter-prop="children"
              >
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option v-for="item in companyList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属终端" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="embeddingMethod">
              <a-select
                v-model="model.terminalId"
                show-search
                allowClear
                placeholder="请选择"
                :default-active-first-option="false"
                :show-arrow="false"
                :not-found-content="null"
                option-filter-prop="children"
              >
                <!-- 显示终端名称+编号 -->
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option v-for="item in terminalList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="建成日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buildTime">
              <j-date
                placeholder="请选择建成日期"
                v-model="model.buildTime"
                date-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="rowLabelCol" :wrapperCol="rowWrapperCol" prop="remark">
              <a-textarea v-model="model.remark" placeholder="请输入备注" :rows="4"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue, simpleDebounce } from '@/utils/util'

export default {
  name: 'PaishuiPipForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      rowLabelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      rowWrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      confirmLoading: false,
      validatorRules: {
        pipPointSt: [{ required: true, message: '请输入开始管点编号!' }],
        pipPointEd: [{ required: true, message: '请输入终点管点编号!' }],
        pipLevel: [{ required: true, message: '请选择管道级别!' }],
        isDredging: [{ required: true, message: '请选择是否清淤!' }],
        areaId: [{ required: true, message: '请输入区域id!' }],
        pipDiameter: [{ required: true, message: '请输入管径!' }],
        hieght: [{ required: true, message: '请输入长度!' }],
      },
      url: {
        add: '/paishui/paishuiPip/add',
        edit: '/paishui/paishuiPip/edit',
        queryById: '/paishui/paishuiPip/queryById',
      },
      companyList: [], // 污水处理厂列表
      terminalList: [], // 农污终端列表
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    this.getCompanyList()
    this.getTerminalList()
    this.handleSearch = simpleDebounce(this.handleSearch, 200)
  },
  methods: {
    async getCompanyList() {
      try {
        const res = await getAction(`/paishui/paishuiFacility/list`, { pageNo: 1, pageSize: 10000 })
        const companyList = res.result.records || []
        this.companyList = companyList
          .filter((facility) => facility.facilityType === 1)
          .map((facility) => ({
            value: facility.id,
            label: facility.facilityName,
          }))
      } catch (error) {
        console.log(error)
      }
    },
    async getTerminalList() {
      try {
        const res = await getAction(`/terminal/terminal/list`, { pageNo: 1, pageSize: 10000 })
        const terminalList = res.result.records || []
        this.terminalList = terminalList.map((terminal) => ({
          value: terminal.terminalId,
          label: `${terminal.terminalName}(${terminal.terminalId})`,
        }))
      } catch (error) {
        console.log(error)
      }
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const { buildTime } = this.model
          const params = {
            ...this.model,
            buildTime: buildTime ? buildTime.split(' ')[0] + ' 00:00:00' : '',
          }
          httpAction(httpurl, params, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
